/**
 * Copyright (C) 2010-2025 Structr GmbH
 *
 * This file is part of Structr <http://structr.org>.
 *
 * Structr is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as
 * published by the Free Software Foundation, either version 3 of the
 * License, or (at your option) any later version.
 *
 * Structr is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with Structr.  If not, see <http://www.gnu.org/licenses/>.
 */
@charset "UTF-8";
/** Defaults */

:root {
	--config-servlet-red: #d8000c;
	--config-servlet-lightred: #ffbaba;
}

@media (max-width: 639px) {
	.config-group, .form-group, .form-group-label {
		display: block;
	}
	.config-group {
	}
	.form-group {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
		margin: 1em 0 0 0;
		align-items: center;
	}
	.form-group label {
		padding: 1rem 0 .5rem 0;
	}
	.basis-full {
		flex-basis: 100%;
	}
	.form-group input[type=text], .form-group textarea {
		flex-grow: 1;
		/*display: block;*/
	}

	li.no-search-match {
		display: none;
	}

	div#main {
		display: flex;
		flex-direction: column;
	}

	div#configTabs {
		display: flex;
		flex-direction: column;
	}
}

@media (min-width: 640px) {
	.form-group {
		display: flex;
		align-items: center;
	}
	.form-group label {
		padding: 1em 1em 1em 0;
	}
	.sm\:min-w-128 {
		min-width: 32rem;
	}
	.sm\:basis-auto {
		flex-basis: auto;
	}
	.form-group input[type=text], .form-group textarea {
		min-width: 32rem;
	}

	div#configTabs {
		display: flex;
	}

	ul.tabs-menu {
		display: flex;
		flex-direction: column;
		padding-right: 0;
		white-space: nowrap;
	}

	.tabs-menu li {
		border-bottom: 0;
		border-left: .25rem solid transparent;
		width: 100%;
	}

	.tabs-menu li.active {
		border-bottom: 0;
		border-left: .25rem solid var(--structr-green);
	}

	.tabs-menu li:not(.active):hover {
		border-bottom: 0;
		border-left: .25rem solid var(--structr-light-green);
	}

	li.no-search-match {
		display: initial;
	}
}

.tab-content div.config-group:first-of-type h1,
.tab-content > h1 {
	margin-top: 0;
}

.tab-content {
	flex-grow: 1;
}

#main {
	top: 4rem;
	height: calc(100% - 4rem);
}

#main.no-search-results::before {
	content: "- No search results -";
	font-style: italic;
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 1;
}

body {
	min-width: initial ! important;
}

#configTabs {
	margin: 2rem 2rem 0 0;
	height: calc(100vh - 11rem);
	border: none;
	background: none;
}

#configTabs .tab-content {
	padding-top: 1.5rem;
	overflow: auto;
	border-radius: 0;
}

.tabs-menu li a {
	padding-right: 0;
	padding-left: 2rem !important;
	width: initial;
}

.config-group {
	padding: 0;
	margin-bottom: 2rem;
}

form.config-form div.buttons {
	text-align: right;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
}

form.config-form div.buttons input[type=reset] {
	margin-right: 1em;
}

.default-action {
	background-color: var(--structr-green);
	color: white;
}

.default-action:hover {
	background-color: var(--dark-structr-green);
}

.config-group h1 {
	margin: .5em 0 0 0;
}

.form-group span {
	margin: 0 1rem 0 .25rem;
}

.form-group i {
	margin: 0 0 0 4px;
	cursor: pointer;
}

#services-table th {
	text-align: left;
	font-size: 10pt;
}

#services-table td {
	padding: 1rem 0;
}

#services-table td:nth-child(1) {
	min-width: 20rem;
	font-weight: bold;
}

#menu {
}

.buttons input[type=submit] {
	color: #222;
}

.buttons input[type=submit]:hover:not(.disabled) {
	color: #333;
	cursor: pointer ! important;
}

.form-group span.context-help-text {
	display: none;
}

button:hover {
	background-color: var(--light-gray-bg-f3);
}

button.toggle-option {
	margin: 4px 4px 0 0;
}

button.toggle-option.active {
	background-color: #ccc !important;
}

button.toggle-option:not(.active) {
	opacity: 0.75;
}

button.toggle-option.active::after {
	content: " \2713";
}

#search-container {
    position: relative;
}

li.search-matches.active {
	background: var(--config-structr-green);
}

li.search-matches {
	background: #b5e27f;
}

label.search-matches {
    color: var(--config-structr-green);
}

label span.search-matches > svg {
    background: var(--config-structr-green);
    border-radius: 1rem;
}

input.search-matches {
    border: 2px solid var(--config-structr-green);
}

button.search-matches {
    border: 1px solid var(--config-structr-green) !important;
    color: var(--config-structr-green);
}

select.search-matches {
    border: 2px solid var(--config-structr-green);
}

select option.search-matches {
	color: var(--config-structr-green);
}

td.search-matches {
	color: var(--config-structr-green);
	font-weight: bold;
}

.tab-content .no-search-match:not(.invalid) {
	display: none;
}

h2 {
	margin: 2em 0 0 0;
}

.align-left {
	float: left;
}

.inline-block {
	display: inline-block;
}

#databases {
	position: relative;
}

div.connection {
	float: left;
	margin: 1em 2em 0 0;
	background-color: var(--solid-white);
	min-width: 36rem;
	width: calc(100vw - 22.5rem);
	min-height: 18rem;
	/*padding: 1em 1.5em;*/
	border-radius: 3px;
	border: none;
	box-shadow: none;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2rem;
	position: initial;
}

div.connection:hover {
	background: none;
	border: none;
	box-shadow: none;
}

div.connection.new-connection {
	/*border: 1px dashed #ddd;*/
}

.app-tile.collapsed {
	width: 24px;
	height: 24px;
	padding: 4px;
}

div.connection.collapsed {
	min-width: 0;
	min-height: 0;
	height: 0;
	padding: 0;
	margin: 0;
	border: none;
	box-shadow: none;
	border-radius: 0;
	text-align: center;
}

div.connection.collapsed p {
	display: none;
}

div.connection h4 {
	font-size: 1.2rem;
	margin: 1.6rem 0;
}

div.connection p {
	/*padding: 1rem 0 0 0;*/
	margin: 0;
}

div.connection label {
	display: block;
	font-size: .75rem;
	margin-bottom: .25rem;
}

div.connection input[readonly="readonly"] {
	background-color: #f0f0f0;
	color: #aaa;
}

div.connection input[type="password"],
div.connection input[type="text"],
div.connection select {
	box-sizing: border-box;
	width: 100%;
}

div.connection p.buttons {
	grid-column: span 2 / span 2;
	/*padding: 2rem 0 0 0;*/
	text-align: right;
	/*margin-top: -2rem;*/
}

div.connection button {
	border: 1px solid rgba(0,0,0,.125);
	position: relative;
	margin: 0 0 0 1rem;
}

.delete-button {
	float: right;
}

.show-add-connection {
	position: absolute;
	top: 2rem;
	right: 2rem;
}

p.must_not_be_empty input {
	background-color: var(--config-servlet-lightred);
	color: var(--config-servlet-red);
	border: 1px solid var(--config-servlet-red);
}

p.must_not_be_empty::after {
	content: "Please provide a value for this field.";
	color: var(--config-servlet-red);
}

p.already_taken input {
	background-color: var(--config-servlet-lightred);
	color: var(--config-servlet-red);
	border: 1px solid var(--config-servlet-red);
}

p.already_taken::after {
	content: "The selected name cannot be used.";
	color: var(--config-servlet-red);
}

div.warning-message {
	position: absolute;
	top: 2rem;
	right: 2rem;
	padding: .5rem 1rem;
}

input[type=text]:invalid {
	background-color: var(--config-servlet-lightred);
	color: var(--config-servlet-red);
	border: 1px solid var(--config-servlet-red);
}

input.combined {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	border-right-style: none;
}

input[type="submit"] {
	background-color: var(--structr-green);
	/*background-color: var(--config-structr-green);*/
	color: var(--solid-white);
}

input[type="submit"]:hover {
	background-color: var(--dark-structr-green);
}

input[type="submit"].combined {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	border-left-style: none;
}